<section ng-controller="SearchController">

    <ol class="breadcrumb">
        <li><a href="#/">home</a></li>
        <li class="active">search</li>
    </ol>

    <h1>Search</h1>

    <div class="row" style="margin-bottom: 2em;">
        <form name="searchForm" class="form-inline col-md-6 col-md-offset-3">
            <div class="form-group">
                <select class="form-control" ng-model="entity">
                    <option value="topic">topics</option>
                    <option value="subscription">subscriptions</option>
                </select>
            </div>

            <div class="form-group">
                <select class="form-control" ng-model="property">
                    <option value="name">by name</option>
                    <option value="owner.id">by owner</option>
                    <option value="endpoint">by endpoint</option>
                </select>
            </div>

            <div class="form-group {{searchForm.pattern.$valid ? '' : 'has-error'}}">
                <input name="pattern" id="pattern" class="form-control" placeholder="regex pattern" ng-model="pattern" required/>
            </div>

            <button type="submit" class="btn btn-primary" ng-disabled="searchForm.$invalid"  ng-click="search()"><i class="fa fa-search"></i></button>
        </div>
    </div>

    <div class="row">
        <div class="list-group">
            <a ng-href="{{item.url}}" class="list-group-item" ng-repeat="item in items">
                <div class="pull-right">
                    <span class="glyphicon glyphicon-chevron-right"></span>
                </div>

                <h4 class="list-group-item-heading">
                    {{item.name}}
                </h4>

                <p class="list-group-item-text" style="margin-top: 1em;">
                    <span class="" ng-repeat="object in item.data">
                        <strong>{{object.label}}:</strong> {{object.value}} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    </span>
                </p>
            </a>
        </div>

        <div ng-show="state.noResults" class="text-center">
            No items found
        </div>

        <div ng-show="state.notSearched" class="text-center">
            Search for something
        </div>

        <div ng-show="fetching" class="text-center">
            <h1><i class="fa fa-circle-o-notch fa-spin"></i></h1>
        </div>
    </div>
</section>
